<template>
<highlightjs language="JavaScript" highlightAuto top :code="code" />
</template>
<script>
export default {
  setup () {
    const code = `
    const state = reactive({
      map: ref(null),
      mapBox: ref(null),
      popup: ref(null),
      overlay: null,
      shopPopup: false
    })

    const init = () => {
      const rome = new Feature({ // 罗马
        geometry: new Point(fromLonLat([12.5, 41.9]))
      })

      const london = new Feature({ // 伦敦
        geometry: new Point(fromLonLat([-0.12755, 51.507222]))
      })

      const madrid = new Feature({ // 马德里
        geometry: new Point(fromLonLat([-3.683333, 40.4]))
      })
      const paris = new Feature({ // 巴黎
        geometry: new Point(fromLonLat([2.353, 48.8566]))
      })
      const berlin = new Feature({ // 柏林
        geometry: new Point(fromLonLat([13.3884, 52.5169]))
      })

      rome.setStyle(// 设置罗马标记点样式
        new style.Style({
          image: new style.Icon({
            color: '#BADA55',
            crossOrigin: 'anonymous',
            imgSize: [20, 20],
            src: require('../../assets/icon/dot.png')
          })
        })
      )

      london.setStyle(// 设置伦敦标记点样式
        new style.Style({
          image: new style.Icon({
            color: 'rgba(255, 0, 0, .5)',
            crossOrigin: 'anonymous',
            src: require('../../assets/icon/dot.png')
          })
        })
      )

      madrid.setStyle(// 设置马德里标记点样式
        new style.Style({
          image: new style.Icon({
            crossOrigin: 'anonymous',
            src: require('../../assets/icon/dot.png')
          })
        })
      )

      paris.setStyle(// 设置巴黎标记点样式
        new style.Style({
          image: new style.Icon({
            color: '#8959A8',
            crossOrigin: 'anonymous',
            imgSize: [20, 20],
            src: require('../../assets/icon/dot.png')
          })
        })
      )

      berlin.setStyle(// 设置柏林标记点样式
        new style.Style({
          image: new style.Icon({
            crossOrigin: 'anonymous',
            imgSize: [20, 20],
            src: require('../../assets/icon/dot.png')
          })
        })
      )

      // 创建矢量容器，将图标特性添加进容器中
      const vectorSource = new VectorSource({
        features: [rome, london, madrid, paris, berlin]
      })

      // 创建矢量图层
      const vectorLayer = new VectorLayer({
        source: vectorSource
      })

      // 底图源
      const rasterLayer = new Tile({
        source: new XYZ({
          url: 'https://api.maptiler.com/maps/topographique/256/{z}/{x}/{y}.png?key=B3EG5uYPUvFucEWVoCa3',
          crossOrigin: ''
        })
      })

      state.map = new Map({
        target: state.mapBox,
        layers: [rasterLayer, vectorLayer],
        view: new View({
          center: fromLonLat([2.896372, 44.6024]),
          zoom: 3
        })
      })
    }
    `
    return {
      code
    }
  }
}
</script>
